<template>
  <!-- 设备管理 -->
  <div id="financeSettleEditDiv">
    <vxe-modal v-model="isShowPeople" width="45vw" show-footer :mask="false">
      <template #title>
        <span class="text-bold">单据信息</span>
      </template>
      <template #default>
        <div class="tableBody" style="height: 400px">
          <el-tabs type="border-card" v-model="activeName">
            <el-tab-pane label="结算明细" name="first" >
              <div class="tableBoBox">
                <vxe-table ref="reqDetailTableRef" :data="settleDetailList" :loading="dLoading" class="mytable-scrollbar supplierTableClazz" border="inner" align="center" height="auto" :row-config="{ isCurrent: true, isHover: true }" :column-config="{ resizable: true }" resizable show-overflow keep-source>
                  <vxe-column type="seq" width="24" fixed="left"></vxe-column>
                  <vxe-column field="feeCode" title="项目代号"> </vxe-column>
                  <vxe-column field="feeName" title="项目名称"> </vxe-column>
                  <vxe-column field="price" title="单价"></vxe-column>
                  <vxe-column field="amount" title="数量"></vxe-column>
                  <vxe-column field="costs" title="金额"></vxe-column>
                </vxe-table>
              </div>

            </el-tab-pane>
            <el-tab-pane label="申请信息" name="second">
              <div class="tableBoBox">
                <vxe-table ref="reqMainTableRef" :data="reqMainList" :loading="rLoading" class="mytable-scrollbar supplierTableClazz" border="inner" align="center" height="auto" :row-config="{ isCurrent: true, isHover: true }" :column-config="{ resizable: true }" resizable show-overflow keep-source>
                  <vxe-column type="seq" width="24" fixed="left"></vxe-column>
                  <vxe-column field="reqNo" title="条码号"></vxe-column>
                  <vxe-column field="patNo" title="病历号"></vxe-column>
                  <vxe-column field="patNa" title="患者姓名"></vxe-column>
                  <vxe-column field="reqPurpose" title="检测项目"></vxe-column>
                </vxe-table>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </template>
    </vxe-modal>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, getCurrentInstance} from 'vue';
let { proxy }: any = getCurrentInstance();

let activeName = ref('first');
let isShowPeople = ref(false);
let settleDetailList: any = reactive([]);
let reqMainList: any = reactive([]);
let dLoading = ref(false); //刷新加载状态
let rLoading = ref(false); //刷新加载状态
let sltSettle: any = ref({});

//暴露属性和方法
defineExpose({
  initPage
});
function initPage(row: any) {
  isShowPeople.value=true;
  findReqMainBySettleList(row.settleNo);
  findSettleDetailList(row.settleNo);
}

function findReqMainBySettleList(settleNo :any) {
  reqMainList.length = 0;
  rLoading.value = true;
  const url = '/lab/financeSettle/findReqMainBySettleList';
  proxy.$http
      .get(url, {
        params: {
          settleNoes: settleNo
        }
      })
      .then((res: any) => {
        reqMainList.length = 0;
        reqMainList.push(...res.data);

        rLoading.value = false;
      })
      .catch((err: any) => {
        rLoading.value = false;
        proxy.$alert(err, '提示');
      });
}

function findSettleDetailList(settleNo :any) {
  settleDetailList.length = 0;
  dLoading.value = true;
  const url = '/lab/financeSettleDetail/findFinanceSettleDetailList';
  proxy.$http
      .get(url, {
        params: {
          //settleNo: sltSettle.settleNo,
          settleNoes: settleNo
        }
      })
      .then((res: any) => {
        settleDetailList.length = 0;
        settleDetailList.push(...res.data);

        dLoading.value = false;
      })
      .catch((err: any) => {
        dLoading.value = false;
        proxy.$alert(err, '提示');
      });
}
</script>
